import { Highlight, themes } from 'prism-react-renderer'

interface CodeBlockProps {
  code: string
  language: string
  darkMode: boolean
}

export default function CodeBlock({
  code,
  language,
  darkMode,
}: CodeBlockProps) {
  return (
    <Highlight
      theme={darkMode ? themes.vsDark : themes.duotoneLight}
      code={code}
      language={language}
    >
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <pre
          className={className}
          style={{
            ...style,
            padding: '10px',
            borderRadius: '5px',
            overflowX: 'auto',
          }}
        >
          {tokens.map((line, i) => (
            <div key={i} {...getLineProps({ line })}>
              {/* 这是行号<span>{i + 1}</span> */}
              {line.map((token, key) => (
                <span key={key} {...getTokenProps({ token })} />
              ))}
            </div>
          ))}
        </pre>
      )}
    </Highlight>
  )
}
